import TableContainer from "@/components/TableContainer"
import { PAGINATION_CONFIG } from "@/constants"
import { ExchangeInfoType } from "@/constants/enums/pointGood"
import { queryExchangeList } from "@/services/system/pointGood"
import { enum2options } from "@/utils/enum2options"
import { useRequest } from "ahooks"
import { Button, Col, DatePicker, Drawer, Form, Input, Row, Select, Space, Table } from "antd"
import dayjs from "dayjs"
import { useEffect, useState } from "react"

interface RecordDrawerProps {
  id?: string
  onCancel?: () => void
}

const RecordDrawer: React.FC<RecordDrawerProps> = props => {
  const [searchExchangeRecordForm] = Form.useForm()
  const [searchParams, setSearchParams] = useState<PointGood.QueryExchangeListParams>({
    pageNum: 1, pageSize: 10,
  })
  const list = useRequest(() => queryExchangeList(searchParams), {
    ready: !!searchParams.id,
    refreshDeps: [searchParams],
  })

  const onFinish = (formValues: any) => {
    setSearchParams({
      ...searchParams,
      nickname: formValues.nickname,
      telephone: formValues.telephone,
      infoType: formValues.infoType,
      beginDay: formValues.timeRange?.[0]?.format('YYYY-MM-DD'),
      endDay: formValues.timeRange?.[0]?.format('YYYY-MM-DD'),
      pageNum: 1,
    })
  }

  useEffect(() => {
    setSearchParams({...searchParams, id: props.id, pageNum: 1})
  }, [props.id])
  
  return (
    <Drawer
      title='兑换明细'
      open={!!props.id}
      onClose={props.onCancel}
      width={'50%'}
      destroyOnClose
    >
      <TableContainer>
        <TableContainer.SearchContainer>
          <Form form={searchExchangeRecordForm} colon={false} name='searchExchangeRecordForm' onFinish={onFinish} initialValues={{
            timeRange: [dayjs().subtract(30, 'days'), dayjs()]
          }}>
            <Row gutter={[12, 12]}>
              <Col span={8}>
                <Form.Item label='用户昵称' name='nickname'>
                  <Input placeholder="请输入" variant="borderless" />
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label='用户手机号' name='telephone'>
                  <Input placeholder="请输入" variant="borderless" />
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label='状态' name='infoType'>
                  <Select options={enum2options(ExchangeInfoType)} variant="borderless" style={{width: '100%'}} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label='兑换时间' name='timeRange'>
                  <DatePicker.RangePicker variant="borderless" style={{width: '100%'}} />
                </Form.Item>
              </Col>
              <Col span={24}>
                <Space>
                  <Button type='primary' htmlType='submit' loading={list.loading}>筛选</Button>
                  <Button htmlType='reset'>重置</Button>
                </Space>
              </Col>
            </Row>
          </Form>
        </TableContainer.SearchContainer>
        <Table
          rowKey='id'
          loading={list.loading}
          dataSource={list.data?.data}
          columns={[
            {title: '兑换时间', dataIndex: 'createTime', render: val => dayjs(val).format('YYYY-MM-DD HH:mm:ss')},
            {title: '状态', dataIndex: 'infoType', render: val => ExchangeInfoType[val]},
            {title: '兑换价(积分)', dataIndex: 'score'},
            {title: '兑换数量', dataIndex: 'num'},
            {title: '兑换总积分', dataIndex: 'totalScore'},
          ]}
          scroll={{y: 700, x: 'max-content'}}
          pagination={{
            ...PAGINATION_CONFIG,
            current: searchParams.pageNum,
            pageSize: searchParams.pageSize,
            total: list.data?.totalCount || 0,
            onChange: (page, pageSize) => {
              setSearchParams({
                ...searchParams,
                pageNum: page === searchParams.pageNum ? 1 : page,
                pageSize,
              })
            }
          }}
        />
      </TableContainer>
    </Drawer>
  )
}

export default RecordDrawer
